<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>    
<%@include file="../common/common.jsp"%>  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品中心</title>
	</head>
	<body>
		<%@include file="../common/header.jsp"%>  
		<div class="same pro_center container clearfix">
			<%@include file="../common/top.jsp"%> 
		
			<%-- <%@include file="../common/nav.jsp"%>   --%>
			<!--导航-->
			<div class="nav f16">
				<!--商品列表-->
				<!-- 引入 导航栏的信息  开始 -->
				<%@ include file="../common/nav.jsp"%>
				<!-- 引入 导航栏的信息  结束 -->
			</div>
			
			<!-- 分类      开始 -->
			<div class="classify">
				<%-- <div class="f16 all">所有分类><p class="r">收起筛选&nbsp;<img src="images/top1.png" alt="" /></p>
					<c:forEach items="${brandList}" var="brand">
						<a href="javascript:void(0)" >${brand.name}</a>
					</c:forEach>
				</div> --%>
				<div class="choose clearfix">
				 	<span>您已选择：</span> 
					 	<c:if test="${className!='null' and className!=''}">
					 			<input type="text" name="className" id="class_name" style="width: 80px;height: 27px; border:1px solid #cf2024; float:left;color: #cf2024;" value="${className}">
								<input type="text" style="width:30px;cursor:pointer; height: 27px;border:0;float:left;color: #fff;background: #cf2024;" value="X" onclick="deleteClass();">
								<input type="hidden" name="classId" id="class_id" value="${classId}">
							&nbsp;&nbsp;
						</c:if>
					<span class="selected">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</span>
				</div>
				<div class="classExt">
					<c:if test="${goodsClassList!='null'}">
						<label for="">分类：</label>
						<c:forEach items="${goodsClassList}" var="goodsClass">
							<a href="${ctx}/goods/productCenter?classId=${goodsClass.id}&className=${goodsClass.name}" data-id2="${goodsClass.id}">${goodsClass.name}</a>
	 					</c:forEach>
					</c:if>
				</div>
				<div class="brandext">
					<label for="">品牌：</label>
					<c:forEach items="${brandList}" var="brand">
						<a href="javascript:void(0);" data-id="${brand.id}">${brand.name}</a> 
<%-- 						<a href="${ctx}/goods/productCenterList?id=${brand.id}&brandName=${brand.name}" target="_blank">${brand.name}</a>
<%-- 						<a href="${ctx}/goods/productCenterList?id=${brand.id}&brandName=${brand.name}" target="_blank">${brand.name}</a>
 --%>					
 					</c:forEach>
					
					<%-- <a href="${ctx}/goods/productCenterList?id='70034'&brandName='小博士'">Lily/丽丽</a>
					<a href="javascript:void(0);">CYANINEA/海青蓝</a>
					<a href="javascript:void(0);">音儿</a> --%>
					<!-- <p class="r">多选</p> -->
				</div>
				<!-- <div>
					<label class="bb" for="">裙长：</label>
					<a href="javascript:void(0);">短裙</a>
					<a href="javascript:void(0);">中长裙</a>
					<a href="javascript:void(0);">中裙</a>
					<a href="javascript:void(0);">长裙</a>
					<p class="r">多选</p>
				</div>
				<div class="hot">
					<label class="cc" for="">选购热点：</label>
					<a href="javascript:void(0);">休闲显瘦</a>
					<a href="javascript:void(0);">气质淑女</a>
					<a href="javascript:void(0);">田园小清新</a>
					<a href="javascript:void(0);">蕾丝</a>
					<a href="javascript:void(0);">打底衫</a>
					<a href="javascript:void(0);">端庄大气</a>
					<a href="javascript:void(0);">民族风</a>
					<div class="r">
						<p>多选 </p>
						<a href="" class="more r">更多&nbsp;<img src="images/xl.png" alt="" /></a>
					</div>
				</div>
				<div>
					<label class="dd" for="">风格：</label>
					<a href="javascript:void(0);">休闲</a>
					<a href="javascript:void(0);">优雅</a>
					<a href="javascript:void(0);">文艺</a>
					<a href="javascript:void(0);"an>欧美</a>
					<a href="javascript:void(0);">复古</a>
					<a href="javascript:void(0);"an>森女</a>
					<a href="javascript:void(0);">民族</a>
					<a href="javascript:void(0);">韩系</a>
					<a href="javascript:void(0);">简约</a>
					<p class="r">多选</p>
				</div>
				
				<div class="condition">
					<label for="">筛选条件：</label>
					<span>腰型<img src="" alt="" /></span>
					<span>尺码<img src="images/xl.png" alt="" /></span>
					<span>袖长<img src="images/xl.png" alt="" /></span>
					<span>上市年份季节<img src="images/xl.png" alt="" /></span>
					<span>相关分类<img src="images/xl.png" alt="" /></span>
				</div>
				<div class="want">
					<label for="">您是不是想找：</label>
					<span>连衣裙春秋款2017新款</span>
					<span>新款女拼接毛呢连衣裙</span>
					<span>雪纺连衣裙2017新款春</span>
					<span>新款碎花连衣裙</span>
				</div> -->
			</div>

			<!-- 分类      结束 -->
			
			
			<ul class="sort">
				<li class="item1 clearfix">
					<p class="selected single_b" onclick="btnSort('0')">综合排序</p>
					<p class="double_b" onclick="btnSort('1')">人气</p>
					<p class="double_b" onclick="btnSort('3')">销量</p>
					<p class="double_b sort_price" onclick="btnSort('4')">价格
						<%-- <img src="${ctx}/images/arrow-shang.png" alt="" /> --%>
						<i class="arrow-top"><img src="${ctx}/images/arrow-shang2.png" alt="" /></i>
						<i class="arrow-bottom"><img src="${ctx}/images/arrow-xia1.png" alt="" /></i>
					</p>
					<%-- <div class="r">
						<p class="address">发货地&nbsp;<img src="${ctx}/images/xl.png" alt="" /></p>
						<p><span><img src="${ctx}/images/left (2).png" alt="" />&nbsp;&nbsp;</span><span><i class="red">1</i>/<i>100</i></span><span>&nbsp;&nbsp;<img src="${ctx}/images/right (2).png" alt="" /></span></p>
					</div> --%>
				</li>
				<li class="item2">
					<p><input type="checkbox" name="checkName" value="01"/>新品</p>
					<p><input type="checkbox" name="checkName" value="02"/>热销</p>
					<p><input type="checkbox" name="checkName" value="03"/>特价</p>
					<p><input type="checkbox" name="checkName" value="09"/>包邮</p>
					<button type="button" style="background-color: #cf2024;color: #fff;padding: 3px 8px;border-radius: 3px;" onclick="submitBtn();">提交</button>
					<!-- <p><input type="checkbox" />正品保障</p>
					<p><input type="checkbox" />7天内退货</p> -->
					<%-- <p class="more">更多<img src="${ctx}/images/xl.png" alt="" /></p> --%>
					<!-- <span class="r">合并同款宝贝</span> -->
				</li>
			</ul>
			<!-- <div class="hello">
				<span class="a">您好 <i>小酒窝</i>,"新款女连衣裙"相关的宝贝：购买过的店铺 找到<i>10</i>件</span>
				<span>|&nbsp;&nbsp;&nbsp;&nbsp;收藏过的店铺 找到<i>60</i>件</span>
			</div> -->
			<div class="pro_list">
				<ul class="clearfix" id="product_center">
					<c:forEach var="item" items="${resultList}">
						<li>
							<a href="${ctx}/goods/queryGoodsDetail?id=${item.id}" target="_blank">
								<c:choose>
									<c:when test="${item.picture!=null and item.picture!=''}">
										<img src="${baseFile}${item.picture}" alt="" />
									</c:when>
									<c:otherwise>
										<img src="${ctx}/images/pro1.png" alt="" />
									</c:otherwise>
								</c:choose>
								
							</a>
							<!-- 获取到产品中心的商品名、折扣信息、以及月销量 -->
							 <div>		
							   <p class="desc">${item.name }</p>
									<%-- <c:if test="${item.proTitle!='' }"> --%>
						       <p class="sales" >${item.proTitle }</p>
					          <%--  </c:if>	 --%>
						       <p class="price">
									¥ ${item.marketPrice }
									<span class="r" style="color:#333;font-size:14px;">月销 ${item.monthSaleMount}笔</span>
								</p>
							</div>	
						<%-- 
							<a href="" title="${item.name}"><p class="name">${item.name}</p></a>
							<p class="price">￥${item.marketPrice}</p> --%>
						</li>
					</c:forEach>
				</ul>
			</div>		
			
			<!--分页   标签开始-->
			<div class="clearfixPage">
				<ul class="page" maxshowpageitem="5" pagelistcount="50"  id="page"></ul>
			</div>
			<!--分页   标签结束-->
		</div>
		
		
		<%-- <div class="recent_news container clearfix">
			<ul>
				<li class="dynamic">
					<p class="f18">最新动态</p>
					<div class="wrap">
						<div>
							<a href="news.html">
								<img src="${ctx}/images/dt1.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
							<a href="news.html" class="middle">
								<img src="${ctx}/images/dt2.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
							<a href="news.html">
								<img src="${ctx}/images/dt3.png" alt="" />
								<p>韩都衣舍携手章子怡出资打造彩妆品牌...</p>
							</a>
						</div>
						<hr />
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
						<a href="">
							<dl class="clearfix f12 nine">
								<dt>少了这八款服装，真心疼你，跟不上潮流的脚步！</dt>
								<dd>2017-03-20</dd>							
							</dl>
						</a>
					</div>
				</li>
				<li class="answer">
					<p class="f18">推荐问答</p>
					<div class="wrap">
						<form action="" class="clearfix">
							<input type="text" placeholder="简单描述你的问题"/>
							<button>找答案</button>
							<a href="">去提问</a>
						</form>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						<dl class="clearfix">
							<dt><i>问</i>冬天吊带连衣裙搭配什么外套好看？ </dt>
							<dd>10条回答</dd>
						</dl>
						
					</div>
				</li>
				<li class="info clearfix">
					<p class="f18">热门资讯</p>
					<div class="wrap">
						<div class="clearfix">
							<a href="">
								<img src="${ctx}/images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="${ctx}/images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="${ctx}/images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="${ctx}/images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="${ctx}/images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="${ctx}/images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
						<div class="clearfix">
							<a href="">
								<img src="${ctx}/images/zx.png" alt="" />
							</a>
							<div class="l">
								<a href=""><p>继王俊凯之后 耐克又打破惯例请来...</p></a>
								<p class="clearfix f10 nine"> 
									<span class="l">2017-03-20</span>
									<span class="browse r"><img src="${ctx}/images/ly.png" alt="" />30</span>
								</p>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div> --%>
		<!--底部-->
		<!-- 引入底部的页面  开始-->
		<%@include file="../common/bottom.jsp"%>
		<!-- 引入底部的页面  结束-->
	</body>
	<script type="text/javascript">
		var totalRecords = ${totalRecords};
	 	var currentPage = ${currentPage};
	 	var a_flag = false;
	 	var idd;
	 	var id2;
	 	var brandNameN;
	 	var className;
		$(function(){
			$('.pro_center .classify .brandext a').click(function(){
				//alert("123")
				//alert($(this).siblings('label').text());
				var brand = $(this).siblings('label').text();
				var pText = $(this).text();
				idd = $(this).attr('data-id');
				id2 = $(this).attr('data-id2');
				var classId = $("#class_id").val(); //获取选中的分类ID
				var brandByText = brand+pText;
				brandNameN = pText;
				openBrand(idd,brandNameN,classId,className,"");
				var $text = $(this).text() + '<em>X</em>'
				var $index = $(this).parent('div').index() - 2;
				$('.choose').find('.selected span').eq($index).html($text).css('display','inline-block');
				$('.pro_center .selected em').click(function(){	
					var $index = $(this).parent().index();
					if($index + 1){
						//获取当前元素信息
						var text = $(this).parent().text();
						$('div').not('.choose').eq($index).find('.intro a').removeClass('selected');
						$(this).parent().empty().hide();
						var class_id = $("#class_id").val();
						var className = $("#class_name").val();
						openBrand("","",class_id,className,"");
					}
				});
			});
			$("#page").initPage(totalRecords,currentPage,GG.kk);
		}); 
		
		function openBrand(id,brandName,id2,className,chk_value){
			$.ajax({
				url : "${ctx}/goods/productCenterList",
				type : "post",
				data : {"id":id,"brandName":brandName,
						"classId":id2,"className":className,
						"chkValue":""+chk_value+""},
				async: false,
				success: function(data,status){
					var resultList = data.resultList;  //获取集合数据
					var currentPageT = data.currentPage; //获取当前页数
					var totalCount = data.totalRecords; //获取总数
					var goodsClassList = data.goodsClassList; //获取分类集合信息
					//alert(JSON.stringify(resultList))
					totalRecords = "";
					currentPage = "";
					currentPage = currentPageT;
					totalRecords = totalCount;
					/* if(goodsClassList!=null){
						$("#classByName label").remove();
						$("#classByName a").remove();
						var valHtml = "";
						valHtml+= "<label for=''>分类：</label> "
						$.each(goodsClassList, function(i,item){      
							valHtml+=" <a href='javascript:void(0);' onclick='btnClass()' data-id2="+item.id+">"+item.name+"</a> ";
						});
						$("#classByName").append(valHtml);
					} */
					
					//alert("当前页数："+currentPage+"---总数:"+totalRecords)
						//移除已有的标签元素数据
					$("#product_center li").remove();
					var html="";
  						//遍历结果信息
  					$.each(resultList, function(i,item){      
						html+= " <li> "
						+" 	<a href='${ctx}/goods/queryGoodsDetail?id="+item.id+"' target='_blank'>"
						var picture = item.picture;
						if(picture!=null){
							html+=" <img src='${baseFile}"+picture+"' style='height: 260px;width: 248px;' alt='' />"
						}else{
							html+=" <img src='${ctx}/images/pro1.png' style='height: 260px;width: 248px;' alt='' />"
						}
						html+=" </a> "
						+" <a href='javascript:void(0)'><p class='name'>"+item.name+"</p></a> "
						+"<div> <p class='sales' style='color:#cf2024;height: 22px;'>"+item.proTitle+"</p> "
						+" 		<p class='price'>￥"+item.marketPrice+"<span class='r' style='color:#333;font-size:14px;'>月销 "+item.monthSaleMount+"笔</span> "
						+"		</p> </div>"
						+" </li> ";
					});
					$("#product_center").append(html);
					a_flag = true;
					$("#page").initPage(totalRecords,currentPage,GG.kk);
				},
				error :	function(xhr, status,e){
					alert("数据异常，请检查服务器"+e);
				}
			
			}); 
		}
		
		
		/**
		  * 根据综合排序
		**/
		function btnSort(type){
			if(type!=null && type=='4'){
				type = clickSortPrice();
			//	var img = $(".pro_center .sort_price").find("img").attr("src");
				/* if(img=='${ctx}/images/arrow-shang.png'){
				 	type="5";
				 	$(".pro_center .sort_price").find("img").attr("src","${ctx}/images/arrow-xia.png");
				}else if(img=='${ctx}/images/arrow-xia.png'){
				    type="4";
	  			 	$(".pro_center .sort_price").find("img").attr("src","${ctx}/images/arrow-shang.png");
				}else{
				 	type="5";
				 	$(".pro_center .sort_price").find("img").attr("src","${ctx}/images/arrow-xia.png");
				} */
			}
			var class_id = $("#class_id").val();
			$.ajax({
				url : "${ctx}/goods/productCenterList",
				type : "post",
				data : {"type":type,"classId":class_id},
				async: false,
				success: function(data,status){
					var resultList = data.resultList;
					var currentPageT = data.currentPage;
					var totalCount = data.totalRecords;
					//alert(JSON.stringify(resultList))
					totalRecords = "";
					currentPage = "";
					currentPage = currentPageT;
					totalRecords = totalCount;
					//alert("当前页数："+currentPage+"---总数:"+totalRecords)
						//移除已有的标签元素数据
					$("#product_center li").remove();
					var html="";
  						//遍历结果信息
  					$.each(resultList, function(i,item){      
						html+= " <li> "
						+" 	<a href='${ctx}/goods/queryGoodsDetail?id="+item.id+"' target='_blank'> "
						var picture = item.picture;
						if(picture!=null){
							html+=" <img src='${baseFile}"+picture+"'  alt='' /></a>"
						}else{
							html+=" <img src='${ctx}/images/pro1.png' alt='' /></a>"
						}
								
						html+=" <a href='javascript:void(0)'><p class='name'>"+item.name+"</p></a> "
						+"<div> <p class='sales' style='color:#cf2024;height: 22px;'>"+item.proTitle+"</p> "
						+" <p class='price'>￥"+item.marketPrice+"<span class='r' style='color:#333;font-size:14px;'>月销 "+item.monthSaleMount+"笔</span> "
						+" </p></div> "
						+" </li> ";
					});
					$("#product_center").append(html);
					a_flag = false;
					$("#page").initPage(totalRecords,currentPage,GG.kk);
				},
				error :	function(xhr, status,e){
					alert("数据异常，请检查服务器"+e);
				}
			
			}); 
		
		}
		/*提交复选框*/
		function submitBtn(){
			var chk_value =[];
			$('input[name="checkName"]:checked').each(function(){
			chk_value.push($(this).val());
			});
			var chkLength = chk_value.length;
			if(chkLength==0){
				alert("选择条件不能为空!")
				return false;
			}
			openBrand("","","","",chk_value);
		}
		
		var GG = {
	        "kk":function(mm){
	        	//alert('${totalRecords}')
	        	$("#page").click(function() {
	        		if(a_flag){
	        			location.href="${ctx}/goods/productCenter?currPage="+mm+"&id="+idd+"&brandNameN="+brandNameN+"";
	        		}else{
	        			location.href="${ctx}/goods/productCenter?currPage="+mm+"";
	        		}
	        	});
	        }
	    }
   			//$("#page").initPage(71,1,GG.kk);
   		//	$("#page").initPage(${totalRecords},${currentPage},GG.kk);
   		//	alert("当前页数："+currentPage+"---总数:"+totalRecords)
    	$("#page").initPage(totalRecords,currentPage,GG.kk);	
	
	
		/*****删除分类，重新加载*******/
		function deleteClass(){
			window.location.href="${ctx}/goods/productCenter";
		}
	
		
		function clickSortPrice(){
			var type = "4";
			var img1 = $('.pro_center .sort_price .arrow-top').find("img").attr("src");
			if(img1!=null && img1=="${ctx}/images/arrow-shang2.png"){
				$('.pro_center .sort_price .arrow-top').find('img').attr('src','${ctx}/images/arrow-shang1.png');
				$('.pro_center .sort_price .arrow-bottom').find('img').attr('src','${ctx}/images/arrow-xia2.png');
				type = "5";
			}else if(img1!=null && img1=="${ctx}/images/arrow-shang1.png"){
				$('.pro_center .sort_price .arrow-top').find("img").attr('src','${ctx}/images/arrow-shang2.png');
				$('.pro_center .sort_price .arrow-bottom').find("img").attr('src','${ctx}/images/arrow-xia1.png');
				type = "4";
			}
			return type;
		}
	</script>
</html>
